<style>
    .fieldlist dd ins{width: 80%}
    .fieldlist dd input:first-child{width: 90%}
    @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
        .fieldlist dd ins{width:70%}      
    }
    .toption{display: none}
    .ops_0{display: block}
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" data-rule="required" class="form-control" name="row[title]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Option_type')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-option_type" data-rule="required" class="form-control selectpicker" name="row[option_type]">
                {foreach name="optionTypeList" item="vo"}
                <option value="{$key}" {in name="key" value=""}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Survey_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-survey_id" data-rule="required" data-source="ykquest/survey/index" class="form-control selectpage" name="row[survey_id]" type="text" value="">
        </div>
    </div>
    {foreach name="optionTypeList" item="vo"}
    {if condition="$key <=3"}
    <div class="form-group toption ops_{$key}">
        <label class="control-label col-xs-12 col-sm-2">{:__('Toption')}:</label>

        <div class="col-xs-12 col-sm-8 " >

            <dl class="fieldlist" data-template="basictpl" data-name="row[toption{$key}]">
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                <!--请注意 dd和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
                <textarea name="row[toption{$key}]" class="form-control hidden" cols="30" rows="5">[]</textarea>
            </dl>
            <script id="basictpl" type="text/html">
                <dd class="form-inline">
                    <ins><input type="text" name="<%=name%>[<%=index%>][content]" class="form-control" value="<%=row.content%>" placeholder="选项" size="60"/></ins>
                    <!--下面的两个按钮务必保留-->
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                    <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                </dd>
                </script>

            </div>

        </div>
        {/if}
        {/foreach} 
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="0">
            </div>
        </div>


        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            </div>
        </div>
    </form>
